<!--
 * @Author: your name
 * @Date: 2022-03-06 15:33:31
 * @LastEditTime: 2024-01-15 15:50:49
 * @LastEditors: sunli
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /etrip-ui/src/pages/cell/demo.vue
-->
<template>
  <div class="wrap">
    <p>基础用法</p>
    <Cell-group>
      <Cell title="单元格" value="内容"></Cell>
      <Cell title="单元格" value="500101199506248179500101199506248179"></Cell>
    </Cell-group>
    <p>卡片风格</p>
    <Cell-Group inset>
      <Cell title="单元格" value="内容"></Cell>
      <Cell title="单元格" value="内容" link></Cell>
      <Cell title="单元格" value="内容"></Cell>
      <Cell title="单元格" value="内容"></Cell>
      <Cell title="单元格" value="内容"></Cell>
    </Cell-Group>
    <p>带箭头</p>
    <Cell title="单元格" value="内容" link></Cell>
    <Cell title="单元格" value="内容" link arrow="down"></Cell>
    <Cell title="单元格" value="内容" link arrow="up"></Cell>
    <p>插槽</p>
    <Cell>
      <template #title>
        <span>单元格</span>
        <span> 副标题</span>
      </template>
      <template #value>
        <span>内容</span>
        <span>?</span>
      </template>
    </Cell>
  </div>
</template>

<script setup>
import {Cell, CellGroup} from '../../../packages/lib/index'
import { ref } from 'vue'
</script>
<style lang='scss' scoped>
.wrap {
  background-color: #f7f8fa;
}
p {
  margin: 20px 16px;
}
</style>